<wide-header-page title="{{title}}">
  <div page-content *ngIf="!isZeroState || (isZeroState && isJoin)">
    <span class="list-subtitle" translate>Featured Currencies</span>
    <ion-list class="settings-list bp-list">
      <div *ngFor="let coin of availableChains">
        <button class="list-button" [disabled]="coin === 'eth' && (isShared || isJoin) && !keyId" ion-item (click)="goToCreateWallet(coin)">
          <ion-icon item-start>
            <img src="assets/img/currencies/{{coin}}.svg" />
          </ion-icon>
          <div class="item-title">{{ getCoinName(coin) }} ({{ coin.toUpperCase() }})</div>
          <div class="item-note" *ngIf="coin === 'eth' && (isShared || isJoin) && !keyId" translate>Only available for already created keys</div>
          <div class="item-note" *ngIf="coin === 'eth' && (isShared || isJoin) && !keyId" translate>Try "create new wallet" option instead</div>
        </button>
      </div>
      <div *ngIf="!isShared && !isJoin">
        <span class="list-subtitle">Tokens</span>
        <button *ngFor="let token of availableTokens" class="list-button" [disabled]="tokenDisabled[token.symbol]" ion-item (click)="showPairedWalletSelector(token)">
          <ion-icon *ngIf="currencyProvider.COIN[token.symbol | uppercase]" item-start>
            <img src="assets/img/currencies/{{token.symbol.toLowerCase()}}.svg" />
          </ion-icon>
          <ion-icon *ngIf="!currencyProvider.COIN[token.symbol | uppercase]" item-start>
            <img [src]="currencyProvider.getLogoURI(token.symbol.toLowerCase())" (error)="currencyProvider.defaultLogoURI(img)" #img/>
          </ion-icon>
          <div class="item-title">{{ token.name }} ({{ token.symbol }})</div>
        </button>
        <button ion-item class="list-button" (click)="goToCustomToken()">
          <ion-icon item-start>
            <img src="assets/img/add-encapsulated.svg" />
          </ion-icon>
          <div class="item-title">{{ 'Add Token' | translate }}</div>
        </button>
      </div>
    </ion-list>
  </div>
  <div page-content *ngIf="isZeroState && !isJoin">
    <span class="list-subtitle" translate>Featured Currencies</span>
    <div class="flex-content">
      <ion-list class="settings-list bp-list">
        <div *ngFor="let coin of availableChains">
          <ion-item class="list-button">
            <ion-icon item-start>
              <img src="assets/img/currencies/{{coin}}.svg" />
            </ion-icon>
            <ion-label class="item-title">{{ getCoinName(coin) }} ({{coin.toUpperCase() }})</ion-label>
            <ion-toggle [(ngModel)]="coinsSelected[coin]" (ngModelChange)="setTokens(coin)"></ion-toggle>
          </ion-item>
        </div>
      </ion-list>
    </div>
  </div>
  <div footer-content *ngIf="isZeroState && !isJoin">
    <button ion-button class="button-standard" [ngClass]="{'no-margin-bottom': !isOnboardingFlow}" [disabled]="!coinsSelected.btc && !coinsSelected.bch && !coinsSelected.eth && !coinsSelected.xrp && !coinsSelected.doge && !coinsSelected.ltc" (click)="createWallets()">
      {{isOnboardingFlow ? 'Continue' : 'Create' | translate}}
    </button>
    <button ion-button clear class="button-standard" (click)="goToImportWallet()" *ngIf="!isOnboardingFlow">
      {{ 'Import existing wallet' | translate }}
    </button>
  </div>
</wide-header-page>
